<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://suryani.cn/support/tags" prefix="page"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>权限管理-权限列表</title>
<base href="${base }" />
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 8]>
	<script language="javascript" type="text/javascript" src="excanvas.min.js"></script>
<![endif]-->
<link rel="stylesheet/less" type="text/css" href="less/default.less">
<script type="text/javascript" src="js/less.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.stickymenu.js"></script>
<script type="text/javascript" src="js/emm-1.0.js"></script>
<script type="text/javascript" src="js/jquery.topLink.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.flot.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
    var oTable = null;
	$(document).ready(function() {
		oTable=$("#permissionTable").dataTable({
			"oLanguage" : {
				"sUrl" : "js/i18n/table_zh.txt"
			},
			"aoColumns" : [ {
				"mDataProp" : "status",
				"sWidth" : "10px",
				"bUseRendered": false,
				"fnRender" : function(obj){
					return "<input type='checkbox' class='checkbox'>"
				}
			},
			{
				"mDataProp" : "id",
				"sWidth" : "auto"
			},
			{
				"mDataProp" : "name",
				"sWidth" : "auto"
			},
			{
				"mDataProp" : "action",
				"sWidth" : "auto"
			},
			{
				"mDataProp" : "createTime",
				"sWidth" : "auto"
			},{
				"mDataProp" : "lastUpdateTime",
				"sWidth" : "auto",
				"fnRender" : function(obj){  
					return "<div class='btn-group'><a class='btn' href='javascript:void(0);' data-id="+obj.aData.id+" data-name="+obj.aData.name+" data-action="+obj.aData.action+" onclick='update(this)'>编辑</a><a class='btn' href='javascript:void(0);' data-id="+obj.aData.id+" onclick='deleteItem(this)'>删除</a></div>";
				}
			}
			],
			"bFilter" : false,
			"bSort" : false,
			"bProcessing" : true,
			"bPaginate" : true,
			"aLengthMenu" : [[5, 10, 15, 20, 30], [5, 10, 15, 20, 30]],
			"sPaginationType" : 'full_numbers',
			"bServerSide" : true,
			"fnServerData" : function(sSource, aoData, fnCallback) {
				var data = {};
				$("#searchForm")
				.find("input[type='text'], select option:selected")
				.each(function() {
					data[ this.name || this.parentNode.name] = this.value;
				});
				var aoDataMap = toAoDataMap(aoData);
				data.offset = aoDataMap.iDisplayStart;
				data.fetchSize = aoDataMap.iDisplayLength;
				$.ajax({
					"dataType" : 'json',
					"type" : "POST",
					"url" : "permission/list",
					"data" : data,
					"success" : function(data) {
						var aoData = {
							iDisplayStart : data.offset,
							iDisplayLength : data.fetchSize,
							aaData : data.data,
							iTotalDisplayRecords : data.total,
							iTotalRecords : data.total
						};
						fnCallback(aoData);
					}
				});
			}
		});
		
		$("#searchForm").submit(function(e){
			oTable.fnPageChange( 'first' );
			return false;
        });
		
		$("#permissionForm").validate({
			rules : {
				name : {
					required : true
				},
				action : {
					required : true
				}
			},
			messages : {
				name : {
					required : "请输入名称。"
				},
				action : {
					required : "请输入URL。"
				}
			}
		});

	});
</script>
</head>
<body>
	<div class="page">
		<page:view page="/common/left?menu=permission" />
		<div id="main" class="main container">
			<page:view page="/common/header?parentTitle=权限管理&childTitle=权限列表" />
			<div id="menu" class="row-fluid menu">
				<form class="form-search" id="searchForm">
					<input type="text" name="queryParam" id="queryParam" class="input-medium search-query"
						placeholder="请输入URL""> 
						<span class="block">
							<div class="btn-group">
								<input type="submit" class="btn btn-primary" value="搜索">
							</div>
						</span>
				</form>
			</div>
			<div class="row-fluid">
				<div class="widget">
					<div class="inner">
						<table id="permissionTable">
							<thead>
								<tr>
									<th width="10px"><input type="checkbox"></th>
									<th width="35px">权限ID</th>
									<th width="70px">权限名称</th>
									<th width="90px">URL</th>
									<th width="100px">创建时间</th>
									<th width="50px">操作</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
						<div class="btn-group">
						<form id="permissionForm" action="permission/add">
							<fieldset align="center">
							<input type="hidden" name="id" id="id" />
								<table>
								<tr>
								<td><label for="name">权限名称</label></td>
								<td><input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /></td>
								</tr>
								<tr>
								<td><label for="url">权限Url</label></td>
								<td><input type="text" name="action" id=action value="" class="text ui-widget-content ui-corner-all" /></td>
								</tr>
								</table>
							</fieldset>
								<input type="submit" class="btn dropdown-toggle" value="保存">
								<input type="reset" class="btn dropdown-toggle" value="取消">
							</form>
						</div>
					</div>
				</div>
			</div>
			<div class="container">
				<page:view page="/common/footer" />
			</div>
		</div>
	</div>
<script type="text/javascript">
function deleteItem(obj){
    
	if(!confirm("你确定要删除吗?")){
		return ;
	}	
	var id=$(obj).attr("data-id");
	var url="permission/delete?id="+id;
		$.ajax({
			type: 'POST',
	  		url: url,
	  		data:"",
	  		success: function(returnMessage){
	    		if(returnMessage=="true"){
	    			var ipage = getDateTablePageInfo(oTable.fnSettings()).iPage; 
					oTable.fnPageChange(ipage);
	    		}else{
	    			alert("删除失败！");
	    		}
				}
		});
}	

function update(obj){
    
	var id=$(obj).attr("data-id");
	var name=$(obj).attr("data-name");
	var action=$(obj).attr("data-action");
	$("#id").val(id);
	$("#name").val(name);
	$("#action").val(action);
}	
</script>
</body>
</html>